<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
		function win(mId,wId){
			window.open("happytime/happy_popup.jsp?mId="+mId+"&wId="+wId,"","resizable=true,toolbar=no,width=250,height=150");
		}
		$(function(){
			var mId;
			var wId;
			$(function(){
				$("#happyFindBtn").click(function(){
					var member=$("#happyFindId").val();
					$.ajax({
						type:"POST",
						url:"${initParam.root}/happy.do",
						data:"command=coupleFindById&id="+member,
						dataType:"json",
						success:function(data){
							if(data.couple!=null){
								mId=data.couple.MID;
								wId=data.couple.WID;
								var couple="<table border='4' cellspacing='15' cellpadding='5' align='center'><tr><td><font color='red'>♥</font><br><img src='${initParam.root}/happytime/happyimg/"+data.couple.FILENAME+"' width='250' height='350' id='coupleImg2'><br><font size=2 color='#050099'><b>&nbsp;"+data.couple.INFO+"</b></font></td></tr></table>";
								$("#imageTable").html(couple);	
								$("#happyFindId").val("").focus();
							}else{
								alert("해당 아이디의 커플이 없습니다.");
								$("#happyFindId").val("").focus();
							}
						}
					});
		
				});
			});
			$("#imageTable").on("click","#coupleImg2",function(){
				window.open("happytime/happy_popup.jsp?mId="+mId+"&wId="+wId,"","resizable=true,toolbar=no,width=400,height=250");
			});
		});
</script>
</head>
<body>
<img src="${initParam.root}/img/happytime_top.gif"><br><br>
<div id="imageTable">
<table border="4" cellspacing="15" cellpadding="5" align="center">
<tr>
<c:forEach items="${requestScope.result.list}" var="i" varStatus="no">
<td><font color="red">♥</font><br><a href="javascript:win('${i.MID}','${i.WID}')"><img src="${initParam.root}/happytime/happyimg/${i.FILENAME}" width="150" height="160" id="coupleImg"></a><br><font size=2 color="#050099"><b>&nbsp;${i.INFO}</b></font></td>
<c:if test="${no.count%4==0}"><tr></tr></c:if>
</c:forEach>
</tr>
</table><br>
<table align="center">
<tr>
<td>
<c:if test="${requestScope.result.pagingBean.previousPageGroup}">
	<a href="${initParam.root}/happy.do?command=happyTimeList&pageNo=${requestScope.result.pagingBean.startPageOfPageGroup-1}">
	<img src="${initParam.root}/img/left_arrow_btn.gif"></a>
	</c:if>
	
	<c:forEach var="i" begin="${requestScope.result.pagingBean.startPageOfPageGroup}" end="${requestScope.result.pagingBean.endPageOfPageGroup}">
	<c:choose>
	<c:when test="${requestScope.result.pagingBean.nowPage!=i}">
	<a href="${initParam.root}/happy.do?command=happyTimeList&pageNo=${i}">${i}</a>
	</c:when>
	<c:otherwise>
	${i}
	</c:otherwise>
	</c:choose>
	</c:forEach>	 
	 
	<c:if test="${requestScope.result.pagingBean.nextPageGroup}">
	<a href="${initParam.root}/happy.do?command=happyTimeList&pageNo=${requestScope.result.pagingBean.endPageOfPageGroup+1}">
	<img src="${initParam.root}/img/right_arrow_btn.gif"></a>
	</c:if>
	<br>
</td>
</tr>
</table>
</div>
<form align="right"><font size="2px" color="#5D5D5D"><b>아이디검색 :</b></font><input type="text" name="happyFindId" id="happyFindId"><input type="button" value="검색" id="happyFindBtn"></form>
</body>
</html>